<template>
  <div class="cell-item">
    <div
      class="wrapper"
      @mousedown="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
      ref="box"
    >
      <div class="inner">
        <div class="content">{{ content }}</div>
        <div class="tip">天气(1✖1)</div>
      </div>
      <!-- <i class="del">×</i> -->
    </div>
  </div>
</template>
<script>
import { setPostion } from "../common/utils.js";
import commonOption from "../mixin";
export default {
  // 1*1的内容块
  name: "Content1times1",
  mixins: [commonOption],
  methods: {
    // ------------ 事件处理函数 ------------------------
    // 鼠标按下
    handleMouseDown(e) {
      e.preventDefault();
      this.isPress = true;
      this.target = e.currentTarget;

      // 拖动元素的宽度和高度 width+padding+border
      this.cellW = this.target.offsetWidth;
      this.cellH = this.target.offsetHeight;

      // 当前点击元素的左顶点，在屏幕中的位置
      this.cellX = this.target.offsetLeft;
      this.cellY = this.target.offsetTop;

      // 鼠标电击时的位置
      this.startX = e.clientX;
      this.startY = e.clientY;

      // 计算在子元素中点击的位置(相对于盒子自身来说) 这是固定的
      this.mouseX = this.startX - this.cellX;
      this.mouseY = this.startY - this.cellY;

      this.target.style.width = this.target.offsetWidth + "px";
      this.target.style.height = this.target.offsetHeight + "px";

      this.target.style.position = "fixed";
      this.target.style.zIndex = "9";
      this.target.style.transition = "";
      this.target.classList.remove("done");

      setPostion(this.target, [this.cellX, this.cellY]);

      // 点击的时候应该判断，是否是从右侧空白格子拖动的
      // 如果是就删除原本在空块中的信息，再执行后续操作
      let index = -1;
      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        // 当前的位置已经有元素了，判断是否是拖动元素
        if (this.fillResArr[i] !== undefined) {
          let { startX, startY } = this.emptyCellsPos[i];
          if (startX === this.cellX && startY == this.cellY) {
            index = i; // 是拖动元素，那就删除当前的位置
            break;
          }
        }
      }
      // 说明是从左侧空白区域拖动的，清除这个块下的标记
      if (index !== -1) {
        this.$store.commit("updateFillResArr", {
          index,
          data: undefined,
        });
      }
    },

    // 鼠标移动
    handleMouseMove(e) {
      e.preventDefault();
      if (!this.isPress) {
        return;
      }
      // ---------------------------------------------
      document.onmousemove = (ev) => {
        // 必须是按压状态
        if (!this.isPress) {
          return;
        }
        const moveX = ev.clientX,
          moveY = ev.clientY;

        // 计算元素在屏幕中正确的位置，设置到top、left上
        this.cellX = moveX - this.mouseX;
        this.cellY = moveY - this.mouseY;
        // 设置正确的位置
        setPostion(this.target, [this.cellX, this.cellY]);

        this.screenX = ev.screenX;
        this.screenY = ev.screenY;
      };
      // ---------------------------------------------
      // 遍历空白块，判断是否有合适的位置
      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        let { startX, startY, el: emptyEl } = this.emptyCellsPos[i]; // 空白块的左上角，在屏幕中的位置
        if (
          this.screenX > startX &&
          this.screenX < startX + this.cellW &&
          this.screenY > startY &&
          this.screenY - 120 < startY + this.cellH
        ) {
          // 满足要求的块，添加交互样式
          for (let i = 0; i < this.emptyCellsPos.length; i++) {
            this.emptyCellsPos[i].el.childNodes[0].style.backgroundColor = "";
          }
          emptyEl.childNodes[0].style.backgroundColor = "#dbfce6";
          // 记录空白块位置
          this.useableIndex = i;
          break;
        } else {
          this.useableIndex = -1;
        }
      }
    },

    // 鼠标抬起
    handleMouseUp(e) {
      e.preventDefault();
      if (!this.isPress) {
        return;
      }
      const index = this.useableIndex;
      this.target.style.zIndex = "auto"; // 恢复默认的层级
      // 当前空白区位置为空，执行插入
      if (index !== -1 && !this.fillResArr[index]) {
        // 取出当前的空白块信息
        let { el: emptyEl } = this.emptyCellsPos[index]; // 空白块的左上角，在屏幕中的位置

        // 将元素添加到右边的空白块中
        emptyEl.childNodes[0].appendChild(this.target);
        this.target.classList.add("done");

        // 内容块填入成功，修改记录，表明当前的子块不再空白，已被元素占有！
        this.$store.commit("updateFillResArr", {
          index: [index],
          data: {
            char: this.target.innerHTML,
            el: this.target,
          },
        });
      } else {
        // 位置不满足时，回到原来的位置
        this.originPos.parentElement.appendChild(this.target);
        this.target.classList.remove("done");
      }

      // 清空样式
      this.target.style.position = "";
      this.target.style.left = "";
      this.target.style.top = "";
      this.target.style.zIndex = "";
      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        this.emptyCellsPos[i].el.childNodes[0].style.backgroundColor = "";
      }
      this.target = null;
      this.isPress = false;
    },
  },
};
</script>

<style scoped>
.cell-item .wrapper {
  background-color: turquoise;
}
</style>